import React from 'react';
import Slider from 'react-slick';

var scope;
var goodsList;
export default class GoodsCarouse extends React.Component {
    constructor(props) {
        super(props);
        goodsList = props.data.list;
        scope = this;
        scope.state = {
            goodsInfo: goodsList[this.getMiddleIndex()],
            type : this.dealQuality(props.type)
        };
    };

    dealQuality(quality){
        var type = 'col-blue';
        if('良' == quality || '中度污染' == quality || '轻度污染' == quality){
            type = 'col-orange';
        }else if('差' == quality || '重度污染' == quality || '严重污染' == quality){
            type = 'col-gray';
        }

        return type;
    };

    render() {
        if(!goodsList || goodsList.length == 0){
           return '';
        }else {
            return (
                <div className="carouse">
                    {this.goodsList()}
                    {this.goodsInfo()}
                </div>
            );
        }
    };

    goodsList() {
        var items = goodsList.map(function (obj) {
            return (
                <div className="img-item">
                    <img src={obj.goods_thumb}></img>
                </div>
            );
        });

        var settings = this.sliderSettings();
        return (
            <Slider {...settings}>
                {items}
            </Slider>
        );
    };

    goodsInfo() {
        var data = scope.state.goodsInfo;
        return (
            <div className="taocan-box">
                <p className="taocan-title" ref="title">{data.gc_name}</p>
                <p className="taocan-desc" ref="desc">{data.gc_desc}</p>
                <div className="taocan-bottom">RMB<span className="price">{data.sale_price}</span>起</div>
            </div>
        );
    };

    sliderSettings() {
        return {
            className: 'center ' + scope.state.type,
            centerMode: true,
            infinite: true,
            centerPadding: '60px',
            slidesToShow: 3,
            initialSlide: this.getMiddleIndex(),
            speed: 500,
            arrows: false,
            afterChange: function (index) {
                scope.setState({goodsInfo: goodsList[index]});
            }
        };
    };

    getMiddleIndex() {
        return goodsList.length % 2 == 0
            ? goodsList.length / 2 - 1
            : Math.ceil(goodsList.length / 2) == 1
            ? 1
            : Math.ceil(goodsList.length / 2) - 1;
    };
};
